<template>
  <div class="new-problem">
    <header class="head">
      <h3 class="title" v-show="hiedTitleAndSave">New Problem</h3>
    </header>
    <v-card class="form">
      <v-card-title class="head">
        <v-btn v-show="hiedTitleAndSave" @click="saveData" icon>
          <v-icon class="icon-save" size="20"> mdi-content-save </v-icon>
        </v-btn>
      </v-card-title>
      <v-card-text class="card-text">
        <v-form ref="form">
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">SR cate</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.SRCate"
                v-validate="'required'"
                name="SR cate"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("SR cate") }}
              </span>
            </v-col>
            <v-col cols="1" class="icon">
              <v-btn width="24" height="24" icon>
                <v-icon class="search-icon" @click="openSelectSRCate">
                  mdi-magnify
                </v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Type</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.type"
                v-validate="'required'"
                name="Type"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Type") }}
              </span>
            </v-col>
            <v-col cols="1" class="icon">
              <v-btn width="24" height="24" icon>
                <v-icon class="search-icon">mdi-magnify</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Department Description</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.departmentDescription"
                v-validate="'required'"
                name="Department Description"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Department Description") }}
              </span>
            </v-col>
            <v-col cols="1" class="icon">
              <v-btn width="24" height="24" icon>
                <v-icon class="search-icon">mdi-magnify</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Floor</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.floor"
                v-validate="'required'"
                name="Floor"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Floor") }}
              </span>
            </v-col>
            <v-col cols="1" class="icon">
              <v-btn width="24" height="24" icon>
                <v-icon class="search-icon">mdi-magnify</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">District</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.district"
                v-validate="'required'"
                name="District"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("District") }}
              </span>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Problem Cate</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.problemCate"
                v-validate="'required'"
                name="Problem Cate"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Problem Cate") }}
              </span>
            </v-col>
            <v-col cols="1" class="icon">
              <v-btn width="24" height="24" icon>
                <v-icon class="search-icon">mdi-magnify</v-icon>
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Problem Description</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-textarea
                v-model="formData.problemDescription"
                v-validate="'required'"
                name="Problem Description"
                class="gray-input"
                solo
                dense
                hide-details
                height="48"
                no-resize
              ></v-textarea>
              <span class="vee-validate-error">
                {{ errors.first("Problem Description") }}
              </span>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Contact Person</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.contactPerson"
                v-validate="'required'"
                name="Contact Person"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Contact Person") }}
              </span>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list">
            <v-col cols="2">
              <p class="label">Contact Number</p>
            </v-col>
            <v-col class="text-left" cols="4">
              <v-text-field
                v-model="formData.contactNumber"
                v-validate="'required'"
                name="Contact Number"
                class="gray-input"
                solo
                dense
                hide-details
              ></v-text-field>
              <span class="vee-validate-error">
                {{ errors.first("Contact Number") }}
              </span>
            </v-col>
          </v-row>
          <v-row no-gutters class="input-list align-start">
            <v-col cols="2">
              <p class="label">Signature</p>
            </v-col>
            <v-col cols="9" class="canvas-container">
              <canvas
                class="canvas"
                ref="canvasF"
                @mousedown="mouseDown($event)"
                @mousemove="mouseMove($event)"
                @mouseup="mouseUp($event)"
              >
              </canvas>
              <v-btn
                @click="clearSignature"
                class="rewrite-btn"
                v-show="!propIsReportProblem && showRewriteBtn"
              >
                rewrite
              </v-btn>
            </v-col>
          </v-row>
          <v-row no-gutters class="icon-check" v-show="showIcon">
            <v-col>
              <v-icon class="icon" @click="saveData">mdi-check-circle</v-icon>
            </v-col>
          </v-row>
        </v-form>
      </v-card-text>
    </v-card>
    <Select
      @select="selectSRCate"
      :show.sync="showSelectSRCate"
      :show-save="false"
      :headers="SRCateHeaders"
      :items="SRCateItems"
      :loading="selectSRCateLoading"
      title="Select SR Cate"
      width="480"
    ></Select>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import VForm from "vuetify/src/components/VForm/index";
import { IReport, ISelectSrCateItem } from "@/components/Kiosk/index";
import Select from "@/components/Quotation/Dialog/Select/Select.vue";
@Component({
  components: {
    Dialog,
    Select,
  },
  props: {
    isReportProblem: Boolean,
  },
})
export default class NewProblem extends Vue {
  get propIsReportProblem() {
    const isReportProblem = this.$props.isReportProblem;
    if (isReportProblem) {
      console.log("close");
      this.closeSignature();
    } else {
      this.openSignature();
    }
    return isReportProblem;
  }
  // SR Cate
  selectSRCateLoading = false;
  showSelectSRCate = false;
  openSelectSRCate() {
    this.showSelectSRCate = true;
  }
  SRCateHeaders = [
    {
      text: "SR cate",
      value: "SRCate",
    },
    {
      text: "Cate Description",
      value: "cateDescription",
    },
  ];
  SRCateItems: ISelectSrCateItem[] = [];
  getSRCateItems() {
    this.selectSRCateLoading = true;
    setTimeout(() => {
      this.SRCateItems = [
        {
          SRCate: "DL",
          cateDescription: "Delivery",
        },
        {
          SRCate: "CAL",
          cateDescription: "Testing for Cal",
        },
        {
          SRCate: "DN",
          cateDescription: "Delivery and Install",
        },
      ];
      this.selectSRCateLoading = false;
    });
  }
  selectSRCate(item: ISelectSrCateItem) {
    this.formData.SRCate = item.SRCate;
    this.showSelectSRCate = false;
  }
  // problem
  hiedTitleAndSave = true;
  showIcon = false;
  formData: IReport = {
    id: "",
    SRCate: "",
    type: "",
    departmentDescription: "",
    floor: "",
    district: "",
    problemCate: "",
    problemDescription: "",
    contactPerson: "",
    contactNumber: "",
    signature: null,
  };
  resetFormData() {
    this.formData.id = "";
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
    this.clearSignature();
  }
  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }
  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
  getFormData(): IReport {
    return JSON.parse(JSON.stringify(this.formData));
  }
  // 显示NewProblem组件部分的内容
  showNewProblem() {
    this.hiedTitleAndSave = true;
    this.showIcon = false;
    this.resetFormData();
  }
  // 显示Problem组件部分的内容
  getReportData(value: object) {
    this.hiedTitleAndSave = false;
    this.showIcon = true;
    this.setFormData(value);
    this.clearSignature();
  }
  saveData() {
    this.$emit("submit");
  }
  // Signature
  // 是否显示清除画布按钮
  showRewriteBtn = false;
  // 画笔移动过的位置
  points: Array<object> = [];
  // 画布
  canvasTxt: CanvasRenderingContext2D | null = null;
  startX = 0;
  startY = 0;
  moveX = 0;
  moveY = 0;
  endX = 0;
  endY = 0;
  // 是否落下画笔
  isDown = false;
  // 画笔颜色
  color = "#000";
  // 线的粗度
  lineWidth = 3;
  openSignature() {
    let canvas: HTMLCanvasElement = this.$refs.canvasF as HTMLCanvasElement;
    if (canvas) {
      canvas.height = canvas.offsetHeight;
      canvas.width = canvas.offsetWidth;
      this.canvasTxt = canvas.getContext("2d");
    }
    if (this.canvasTxt) {
      this.canvasTxt.strokeStyle = this.color;
      this.canvasTxt.lineWidth = this.lineWidth;
    }
  }
  closeSignature() {
    if (this.canvasTxt) {
      // this.canvasTxt.lineWidth = 0;
    }
  }
  mouseDown(e: MouseEvent) {
    e.preventDefault();
    let obj = {
      x: e.offsetX,
      y: e.offsetY,
    };
    this.startX = obj.x;
    this.startY = obj.y;
    if (this.canvasTxt) {
      this.canvasTxt.beginPath(); // 开始动画
    }
    this.points.push(obj);
    this.isDown = true;
  }
  mouseMove(e: MouseEvent) {
    e.preventDefault();
    if (this.isDown) {
      let obj = {
        x: e.offsetX,
        y: e.offsetY,
      };
      this.moveY = obj.y;
      this.moveX = obj.x;
      if (this.canvasTxt) {
        this.canvasTxt.moveTo(this.startX, this.startY); //移动画笔
        this.canvasTxt.lineTo(obj.x, obj.y); //创建线条
        this.canvasTxt.stroke(); //画线
      }

      this.startY = obj.y;
      this.startX = obj.x;
      this.points.push(obj); //记录点
    }
  }
  mouseUp(e: MouseEvent) {
    e.preventDefault();
    let obj = {
      x: e.offsetX,
      y: e.offsetY,
    };
    if (this.canvasTxt) {
      this.canvasTxt.closePath(); //收笔
    }
    this.points.push(obj); //记录点
    this.points.push({ x: -1, y: -1 });
    this.isDown = false;
    this.showRewriteBtn = true;
  }
  // 清除签名
  clearSignature() {
    let canvas: HTMLCanvasElement = this.$refs.canvasF as HTMLCanvasElement;
    if (this.canvasTxt) {
      this.canvasTxt.clearRect(0, 0, canvas.width, canvas.height);
    }
    this.points = [];
    this.showRewriteBtn = false;
  }
  mounted() {
    this.getSRCateItems();
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Kiosk/NewProblem/NewProblem.scss";
</style>
